<template>

  <div>
    <div class="center-middle" style="color: #303133;text-align: center;"><h2>🏢🔄欢迎使用 公寓智能分配系统🏢🔄</h2></div>

    <div class="center-middle" style="color: #303133;text-align: center;">
      <h3>请选择需要分配的公寓楼</h3>
      <el-select style="margin-right:8px " v-model="selectedBuilding" placeholder="选择公寓楼">
        <el-option v-for="building in buildingList" :key="building.id" :label="building.name" :value="building.id"/>
      </el-select>
      <!-- 确认分配的弹窗 -->
      <el-popconfirm
          v-model="confirmationDialogVisible"
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="el-icon-info"
          icon-color="red"
          title="您确定要进行宿舍分配吗？"
          @confirm="handleConfirmation"
          @cancel="handleCancel"
      >
        <!-- 触发弹窗的按钮 -->
        <el-button type="danger" slot="reference">确认分配</el-button>
      </el-popconfirm>

      <el-button style="margin-left: 5px" @click="handleDefaultClick">查看结果</el-button>
    </div>

    <div style="margin-top: 30px">
      <!-- 表格部分 -->
      <el-table v-if="showTable" :data="studentsAndDormitories" border>
        <!-- 表格列的定义，根据实际数据结构进行调整 -->
        <el-table-column prop="studentName" label="学生姓名"></el-table-column>
        <el-table-column prop="dormitoryName" label="宿舍名称"></el-table-column>
        <!-- 其他列... -->
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      buildingList: [],
      selectedBuilding: null,
      studentsAndDormitories: [],
      showTable: false,
    };
  },
  created() {
    // 在组件创建时获取公寓楼数据
    this.fetchBuildingList();
  },
  methods: {
    // 点击确认分配按钮时显示确认弹窗
    showConfirmationDialog() {
      this.confirmationDialogVisible = true;
    },
    // 处理确认按钮的点击事件
    handleConfirmation() {
      // 在这里调用确认分配的逻辑
      this.confirmDormitoryAllocation();
    },
    // 处理取消按钮的点击事件
    handleCancel() {
      // 在这里处理取消的逻辑，或者不做任何操作
    },
    async fetchBuildingList() {
      // 使用axios或其他方式从后端获取公寓楼数据
      try {
        const response = await this.$axios.get('http://localhost:9090/building/list');
        this.buildingList = response.data.data;
      } catch (error) {
        console.error('Error fetching building list:', error);
      }
    },
    // 确认分配的逻辑
    async confirmDormitoryAllocation() {
      try {
        // 发送宿舍分配的请求
        const response = await this.$axios.post(`http://localhost:9090/dormitory/rearrange/${this.selectedBuilding}`);

        // 处理分配结果，这里假设后端返回了分配结果的数据
        const dormitoryAllocationResult = response.data;

        // 将分配结果通过自定义事件传递给父组件
        this.$emit('DormitoryAllocationResult', dormitoryAllocationResult);

        // 显示成功消息
        this.$message.success("宿舍分配成功");
      } catch (error) {
        // 显示失败消息
        this.$message.error("宿舍分配失败");
        console.error('宿舍分配失败:', error);
      } finally {
        // 关闭确认分配弹窗
        this.confirmationDialogVisible = false;
      }
    },
    async handleDefaultClick() {
      try {
        // 发送 GET 请求获取宿舍楼的学生和对应的宿舍数据
        const response = await this.$axios.get(`http://localhost:9090/dormitory/preview/${this.selectedBuilding}`);
        // 存储学生和宿舍数据到组件的数据中
        this.studentsAndDormitories = response.data.data;
        // 显示表格或导航到包含表格的页面
        // 你可以根据需求进行修改
        this.showTable = true;  // 例如，将 showTable 设为 true，然后在模板中使用 v-if 来决定是否显示表格
      } catch (error) {
        console.error('Error fetching preview data:', error);
      }
    },
  },
}
</script>

<style scoped>

</style>